<script>
import { defineComponent } from "vue";
import { loginList } from '@/api/login'

import { Shop, Fold, Expand } from "@element-plus/icons-vue";
import AsideMenuVue from "../components/AsideMenu.vue";
import { useRouter } from "vue-router"
const router = useRouter();

export default defineComponent({
    data() {
        return {
            isShow: true,
            username: '',
            router
        };
    },
    computed: {
        headerIconShow() {
            return this.isShow ? "Fold" : "Expand";
        },
        asideWidth() {
            return this.isShow ? "200px" : "50px";
        },
    },
    methods: {
        out() {
            this.$router.push('/login')
            window.localStorage.setItem('token', '')
            window.localStorage.setItem('username', '')
        }
    },
    watch: {},
    components: {
        Shop,
        Fold,
        Expand,
        AsideMenuVue,
    },
    mounted() {
        loginList({
            username: window.localStorage.getItem('username'),
            password: '123456',
        }).then(res => {
            this.username = res.data.data.username
            console.log(this.username)
        })
    }
});
</script>

<template>
    <div class="common-layout">
        <el-container>
            <el-aside>
                <div class="log_box">
                    <!-- <el-icon size="35" color="#666">
                        <Shop />
                    </el-icon> -->
                    <img class="img1" src="../../image/fenqishangcheng.png" alt="">
                    <span v-show="isShow">商城后台管理系统</span>
                </div>
                <AsideMenuVue :isshow="isShow"></AsideMenuVue>
            </el-aside>

            <el-container>
                <el-header>
                    <el-icon size="35" @click="isShow = !isShow">
                        <component :is="headerIconShow"></component>
                    </el-icon>

                    <div class="user_info_box">
                        <div class="demo-type">
                            <div>
                                <el-avatar v-show="this.username"
                                    src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
                            </div>
                        </div>
                        <p>
                            <span v-show="this.username">欢迎: {{ this.username }} </span>
                            <el-button v-if="this.username" @click="out">点击退出</el-button>
                            <el-button v-else @click="out">点击跳转登录</el-button>
                        </p>

                    </div>

                </el-header>
                <el-main>
                    <!-- <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/user/managerlist'}">管理员列表</el-breadcrumb-item>
                        <el-breadcrumb-item :to="{ path: '/pro/addpro'}">用户列表</el-breadcrumb-item>
                        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                    </el-breadcrumb> -->
                    <router-view></router-view>

                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<style lang="scss" scoped>
.el-container {
    background-color: white;

    .el-aside {
       background-color: rgb(38, 50, 56);
        // 给当前属性绑定一个变量
        width: v-bind(asideWidth);

        .log_box {
            width: 100%;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            background-color: rgb(60, 141, 188,);

            .img1{
                width: 37px;
                height: 37px;
            }
        }
    }

    .el-header {
        background-color: rgb(60, 141, 188,);
        display: flex;
        align-items: center;

        .user_info_box {
            position: absolute;
            right: 20px;
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;

            .el-button {
                margin-left: 10px;
            }
        }
    }
}

.demo-type {
    display: flex;
}

.demo-type>div {
    flex: 1;
    text-align: center;
}

.demo-type>div:not(:last-child) {
    border-right: 1px solid var(--el-border-color);
}


</style>
